<template>
  <div class="box">
    <div class="item_wrap" v-for="(item, index) in list" :key="index">
      <div class="item_all">
        <div class="item_xx">
          <div class="tu">
            <img :src="item.tu" alt="" />
            <div class="txt">
              <span>{{ item.txt }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",

  data() {
    return {
      list: [
        {
          tu: "https://p0.meituan.net/imeituanbusiness/4579713360f6b07c482d475606dcdaf32232.png",
          txt: "美食",
        },
        {
          tu: "	https://p0.meituan.net/imeituanbusiness/36ea5f8aa1429104ef51c9e03fe212a54183.png",
          txt: "猫眼电影",
        },
        {
          tu: "https://p0.meituan.net/imeituanbusiness/ea0c6fab93f5070dfc7baa50ac9052a02300.png",
          txt: "酒店",
        },
        {
          tu: "	https://p0.meituan.net/imeituanbusiness/7b30434d02d20c4e0428cbc2091499f22631.png",
          txt: "休闲娱乐",
        },
        {
          tu: "	https://p0.meituan.net/imeituanbusiness/f8fc99f79983d96a12889d00ad4df41a2868.png",
          txt: "外卖",
        },
        {
          tu: "	https://p0.meituan.net/imeituanbusiness/982e9a55410baae204a220840b11cc952772.png",
          txt: "KTV",
        },
        {
          tu: "https://p0.meituan.net/imeituanbusiness/586d25e7f9615a91b831713c5b68fdd62345.png",
          txt: "周边游",
        },
        {
          tu: "	https://p0.meituan.net/imeituanbusiness/862a8ecbcaec80cc827090074c358f882565.png",
          txt: "丽人",
        },
        {
          tu: "https://p0.meituan.net/imeituanbusiness/51b317553ac233d10e00e22c3b198aac2906.png",
          txt: "母婴亲子",
        },
        {
          tu: "https://p0.meituan.net/imeituanbusiness/ad793f3d4b6625b60a9aeb64688739952061.png",
          txt: "全部分类",
        },
      ],
    };
  },

  mounted() {},

  methods: {},
};
</script>

<style scoped>
.box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.item_wrap {
  display: flex;
  justify-content: space-between;
}

img {
  width: 50%;
  height: 50%;
}

.tu {
  width: 130px;
  height: 130px;
}

.txt {
  text-align: center;
  font-size: 24px;
  display: flex;
  align-content: center;
}
</style>